import {List, Avatar, Table, Button} from "antd";
import {useEffect, useState} from "react";
import {history} from 'umi';

const FactoryList = () => {
    const [data, setData] = useState<[any]>()

    const core_info_result = ['core_info', 'data', 'result']

    const fetchData = () => {
        fetch("http://127.0.0.1:8000/api/factories/")
            .then(async res => {
                const json_data = await res.json();
                const results: [any] = json_data.results;
                results.forEach((data) => {
                    data.brief_info = JSON.parse(data.brief_info_json)
                    data.core_info = JSON.parse(data.core_info_json)
                    data.catalog = JSON.parse(data.catalog_json)
                    data.doc_for_pc = JSON.parse(data.doc_for_pc_json)

                    delete data.brief_info_json
                    delete data.core_info_json
                    delete data.catalog_json
                })
                console.log(results[0].doc_for_pc.data)
                setData(results)
            })
    }

    const SimpleColumn = ({title, content}: {title: string, content: string}) => {
        return (<Table.Column
            title={title}
            render={() => {
                return (
                    <div>
                        {content}
                    </div>
                );
            }}
        />)
    }

    const WaitCrawl = ({title}: {title: string}) => {
        return <SimpleColumn title={title} content={'等待采集'}/>
    }

    const WaitExtra = ({title}: {title: string}) => {
        return <SimpleColumn title={title} content={'等待整理'}/>
    }

    useEffect(() => {
        fetchData()
    }, [])

    console.log(core_info_result.concat('productionService'))

    return (
        <Table dataSource={data}>
            <Table.Column
                title={"商家名称/来源ID"}
                render={(fac: any) => {
                    return (
                        <div>
                            <div>{fac.brief_info.facName}</div>
                            <div>{fac.fac_id}</div>
                        </div>
                    );
                }}
            />

            <Table.Column
                title={"主营品类"}
                dataIndex={core_info_result.concat('productionService')}
                render={(service: any) => {
                    return (
                        <div>{service.replaceAll(";", " ")}</div>
                    )
                }}
            />

            <Table.Column
                title={"地区"}
                dataIndex={['brief_info', 'location']}
            />

            <Table.Column
                title={"厂房面积"}
                dataIndex={['doc_for_pc', 'data', 'profileData', 'factoryControlAcreage', 'value']}
            />

            <Table.Column
                title={"员工人数"}
                dataIndex={['doc_for_pc', 'data', 'profileData', 'workerNum2', 'value']}
            />

            <Table.Column
                title={'成立时间'}
                render={() => {
                    return (
                        <div>
                            待采集
                        </div>
                    );
                }}
            />

            <Table.Column
                title={'年交易额'}
                render={() => {
                    return (
                        <div>
                            没找到
                        </div>
                    );
                }}
            />

            <Table.Column
                title={'加工模式'}
                render={() => {
                    return (
                        <div>
                            含义不清
                        </div>
                    );
                }}
            />

            <Table.Column
                title={'代工模式'}
                render={() => {
                    return (
                        <div>
                            含义不清
                        </div>
                    );
                }}
            />

            <Table.Column
                title={'服务操作'}
                render={(fac) => {
                    return (
                      <Button type={"primary"}
                      onClick={() => {
                        history.push(`/FactoryDetail/${fac.id}`)
                      }}>
                        工厂详情
                      </Button>
                    );
                }}
            />
        </Table>
    );
}

export default FactoryList
